<!-- @description  登陆-->
<!-- @author  daicj -->
<!-- @date 2020-04-18 -->
<template>
	<view class="login_page">
		<view class="bgBox">PAS系统</view>
		<view class="login_page_box">
			<!-- 登陆账号密码 -->
			<view class="login_msg">
				<view class="loginText">登录</view>
				<view class="account margin-bottom-xxl">
					<u-input v-model="loginName" type="text" placeholder="请输入账号" border="false" placeholder-class="textColor" />
				</view>
				<view class="password margin-bottom-xxl">
					<u-input v-model="password" type="password" placeholder='请输入密码'  border="false" placeholder-class="textColor" />
				</view>
			</view>
			<!-- 登陆按键 -->
			<button class="login_btn" @tap="login">
				<p>登录</p>
			</button>
		</view>
	</view>
</template>

<script>
	var t = null;
	export default {
		name: 'login',
		data() {
			return {
				loginName: '',
				password: '',
			};
		},
		onLoad() {
			setTimeout(function() {
				plus.navigator.closeSplashscreen();
			}, 1000);
		},
		onBackPress(event) {
			if (event.from === 'navigateBack') {
				return false;
			} else {
				this.$tools.onBackPressQuit('再按一次退出应用');
				return true;
			}
		},
		methods: {
			login() {
				let params = {
					UserName: this.loginName,
					Password:  this.password,
				};
				if (this.$tools.emptyValid(this.loginName)) {
					uni.showToast({
						title: `请输入账号`,
						icon: `none`
					});
					return;
				}
					if (this.password.length == 0) {
						try {
							uni.showToast({
								title: '请输入密码',
								icon: `none`
							});
						} catch (error) {}
						return;
					}
				let opt = this.$appApi.getApi('login', params, true, false);
				console.log(opt)
				let reqeust = this.$tools.request(
					opt,
					res => {
						console.log(res)
						uni.switchTab({
							url:'/pages/index/tab-index'
						})
						})
			// 			console.log(res);
			// 			// 登陆存储token/个人信息
			// 			this.$tools.setToken(res.token);
			// 			this.$tools.setUserInfo({
			// 				id: res.userId,
			// 				userName: res.userName,
			// 				avatar: res.avatar,
			// 				phonenumber: res.phonenumber,
			// 				isExpert:res.isExpert
			// 			});
			// 			if (this.isRememberPwd) {
			// 				this.$tools.setAccountsInfo({
			// 					loginName:this.loginName,
			// 					password:this.password
			// 				})
			// 			} else {
			// 				this.$tools.removeAccountsInfo()
			// 			}
			// 			uni.switchTab({
			// 				url: '/pages/index/tab-index',
			// 				fail: error => {
			// 					console.log(error);
			// 				}
			// 			});
			// 			this.isclick = true;
			// 		},
			// 		err => {
			// 			this.isclick = true;
			// 		}
			// 	);
			}
		}
	}
</script>
<style lang="scss" scoped>
	page {
		background-color: #FFFFFF;
	}
	.num-code {
		width: 180rpx;
		font-size: $uni-font-size-base;
		color: $hub-color-font-important;
		text-align: center;
		margin-left: 20rpx;
	}

	.textColor {
		color: $hub-color-font-weak;
	}

	.login_page {
		padding: 0 100rpx;
		min-height: 100vh;
		height: -webkit-fill-available;
		padding-top: 458rpx;
		.bgBox{
			width: 100%;
			height: 458rpx;
			position: absolute;
			top: 0;
			left: 0;
			background-image: url(../../static/topBgc.png),url(../../static/topBg.png);
			background-position: left bottom,left top;
			background-repeat: no-repeat,no-repeat;
			background-size: contain,contain;
			font-size: 48rpx;
			color: #fff;
			font-weight: bold;
			display: flex;
			align-items: center;
			justify-content: center;
		}
		.backIcon {
			color: $hub-color-font-important;
			font-size: 36rpx;
			width: 120rpx;
			height: 120rpx;
			position: fixed;
			top: 50rpx;
			left: 30rpx;
			display: flex;
			align-items: center;
		}

		.login_page_box {
			width: 100%;
			padding-top: 70rpx;
			.login_msg {
				width: 100%;
				.loginText{
					font-size: 48rpx;
					font-weight: bold;
					text-align: left;
					margin-bottom: 60rpx;
				}
				.account,
				.password {
					height: 100rpx;
					color: $hub-color-font-important;
					display: flex;
					align-items: center;
					background-color: #f5f5f5;
					text-align: left;
					position: relative;
					min-width: 0;
					border-radius: 20rpx;
					padding: 0 40rpx;
					input {
						flex: 1;
					}

					.iconfont {
						margin: auto 0;
						font-size: 22px;
						margin-right: 10px;
						color: $hub-color-font-weak;
					}
				}
			}

			.login_btn {
				margin-top: 60rpx;
				width: 100%;
				height: 88rpx;
				background-color: #0EBA77;
				color: #FFFFFF;
				border-radius: 80rpx;
			}

			.login_q {
				margin-top: 40rpx;
				font-size: 30rpx;
				display: flex;
				justify-content: space-between;
			}
			// .register{
			// 	position: absolute;
			// 	bottom: 40rpx;
			// 	left: 50%;
			// 	transform: translateX(-50%);
			// }
		}
	}
</style>
